﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../Scripts/crypto-js.js"></script>
  <script src="../Scripts/secret.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <title>传总装工位看板</title>
  <style>
    .wrapper {
      margin: 5px;
      position: relative;
      padding: 10px;
      border: 3px solid blue;
      width: 3130px;
      height: 1070px;
    }

    .item {
      width: 240px;
      height: 170px;
      border: 1px dashed blue;
      position: absolute;
    }

    .rowOne {
      top: 10px
    }

    .rowTwo {
      top: 190px
    }

    .rowThree {
      top: 370px
    }

    .rowFour {
      top: 550px;
    }

    .rowFive {
      top: 730px;
    }

    .rowSix {
      top: 910px;
    }

    h6 {
      margin: 0;
      padding: 0;
      text-align: center;
      font-weight: bold;
      height: 30px;
      font-size: 14px;
      line-height: 30px;
    }

    h3 {
      margin: 0;
      padding: 0;
      text-align: center;
      font-weight: bold;
      height: 30px;
      font-size: 24px;
      line-height: 170px;
    }

    p {
      text-align: center;
      font-weight: bold;
      height: 5px;
      font-size: 8px;
      line-height: 10px;
    }

    .item-lable {
      font-weight: bold !important;
      color: #409EFF !important;
      white-space: nowrap;
    }

    .content-lable {
      white-space: nowrap;
    }

    .el-tooltip__popper {
      white-space: nowrap;
    }

    .el-popover {
      margin: 10px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak v-on:keyup.enter="getData">
    <ly-board-header title="传总装工位看板" style="width: 3160px;"></ly-board-header>

    <div class="wrapper">
      <template v-for="item,x in workstationMapping">
        <div :class="item.class" :style="item.style">
          <h6>{{item.name}}</h6>
          <el-table :data="item.dataList" border height="140">
            <el-table-column label="发动机号" prop="machineno" show-overflow-tooltip></el-table-column>
            <el-table-column label="任务名称" prop="description" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-popover :ref="'popper' + x + '-' + scope.$index" trigger="click" placement="top"
                  v-model="scope.row.detail.dialogVisiable">
                  <div slot="reference">
                    <i class="el-icon-info" style="margin-right: 5px;"
                      @click="showDetail(scope.row,x,scope.$index)"></i>{{scope.row.description}}
                  </div>
                  <div>
                    <el-descriptions label-class-name="item-lable" content-class-name="content-lable"
                      :title="scope.row.detail.title" border :column="5" style="margin-bottom: 10px;">
                      <el-descriptions-item label="发动机号">
                        {{scope.row.detail.data.machineno}}
                      </el-descriptions-item>
                      <el-descriptions-item label="任务单号">
                        {{scope.row.detail.data.containerno}}
                      </el-descriptions-item>
                      <el-descriptions-item label="任务名称">
                        {{scope.row.detail.data.description}}
                      </el-descriptions-item>
                      <el-descriptions-item label="计划开始时间">
                        <span v-if="scope.row.detail.data.plannedstartdate">
                          {{scope.row.detail.data.plannedstartdate.replace('T',' ')}}
                        </span>
                      </el-descriptions-item>
                      <el-descriptions-item label="计划完成时间">
                        <span v-if="scope.row.detail.data.plannedfinishdate">
                          {{scope.row.detail.data.plannedfinishdate.replace('T',' ')}}
                        </span>
                      </el-descriptions-item>
                      <el-descriptions-item label="班">
                        {{scope.row.detail.data.shiftname}}
                      </el-descriptions-item>
                      <el-descriptions-item label="组">
                        {{scope.row.detail.data.teamname}}
                      </el-descriptions-item>
                      <el-descriptions-item label="领工人">
                        {{scope.row.detail.data.fullname}}
                      </el-descriptions-item>
                      <el-descriptions-item label="是否缺件">
                        <el-tag :type="scope.row.detail.data.isqitao === '否'? 'danger' : 'success'">
                          {{scope.row.detail.data.isqitao}}
                        </el-tag>
                      </el-descriptions-item>
                      <el-descriptions-item label="是否返件">
                        <el-tag :type="scope.row.detail.data.isqitao === '否'? 'danger' : 'success'">
                          {{scope.row.detail.data.isqitao}}
                        </el-tag>
                      </el-descriptions-item>
                    </el-descriptions>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>

      <div class="item rowOne" style="height: 530px;width: 130px;left:3010px">
        <h3 style="line-height: 530px;">传总装休息</h3>
        <h3 style="line-height: 530px;">岛及推车存</h3>
        <h3 style="line-height: 530px;">放区</h3>
      </div>

      <div class="item rowTwo" style="width: 740px;left:10px">
        <h3>批产成品超市</h3>
      </div>

      <div class="item rowTwo" style="width: 740px;left:2260px">
        <h3>推车存放区</h6>
      </div>

      <div class="item rowThree" style="width: 365px;left:1135px">
        <h3>空地</h3>
      </div>

      <div class="item rowThree" style="width: 365px;left:2635px">
        <h3>存放区</h3>
      </div>

      <div class="item rowFour" style="width: 130px;left:3010px">
        <h3>推车存放区</h3>
      </div>

      <!-- rowFive -->
      <div class="item rowFive" style="height: 350px;width: 740px;left:10px">
        <h3 style="line-height: 350px;">国旗 领导参观区</h3>
      </div>

      <div class="item rowFive" style="left:2760px">
        <h3>加力存放区</h3>
      </div>

      <div class="item rowFive" style="width: 130px;left:3010px">
        <h3>总装临时存</h3>
        <h3>放区</h3>
      </div>

      <div class="item rowSix" style="width: 740px;left:760px">
        <h3>精盖道场</h3>
      </div>

      <div class="item rowSix" style="width: 740px;left:1510px">
        <h3>发动机停放区</h3>
      </div>

      <div class="item rowSix" style="width: 740px;left:2260px">
        <h3>发动机停放区</h3>
      </div>

      <div class="item rowSix" style="width: 130px;left:3010px">
        <h3>传装临时存</h3>
        <h3>放区</h3>
      </div>
    </div>
  </div>

  <script type="module">
    import LyBoardHeader from '../Scripts/components/LyBoardHeader.js'
    import { getParams } from '../Scripts/hooks/useCommonMethod.js'
    import { getFactoryInfo } from '../Scripts/hooks/fetchAPI.js'
    const app = new Vue({
      el: '#app',
      components: { LyBoardHeader },
      data: {
        queryInfo: { factoryname: '' },
        workstationMapping: [
          { index: 0, name: '03-CZ-WP', desc: '03-CZ-WP', dataList: [], class: 'item rowOne', style: { width: '740px', left: '1510px' } },
          { index: 1, name: '03-ZZ-WP', desc: '03-ZZ-WP', dataList: [], class: 'item rowOne', style: { width: '740px', left: '2260px' } },
          { index: 2, name: '03-CZ-IT/ITA-1', desc: '03-CZ-IT/ITA-1', dataList: [], class: 'item rowTwo', style: { left: '760px' } },
          { index: 3, name: '03-CZ-IT/ITA-2', desc: '03-CZ-IT/ITA-2', dataList: [], class: 'item rowTwo', style: { left: '1010px' } },
          { index: 4, name: '03-CZZ-IT-1', desc: '03-CZZ-IT-1', dataList: [], class: 'item rowTwo', style: { left: '1260px' } },
          { index: 5, name: '03-CZZ-IT-2', desc: '03-CZZ-IT-2', dataList: [], class: 'item rowTwo', style: { left: '1510px' } },
          { index: 6, name: '03-ZZ-ITA-1', desc: '03-ZZ-ITA-1', dataList: [], class: 'item rowTwo', style: { left: '1760px' } },
          { index: 7, name: '03-ZZ-ITA-2', desc: '03-ZZ-ITA-2', dataList: [], class: 'item rowTwo', style: { left: '2010px' } },
          { index: 8, name: '03-CZ-13-MDX-1', desc: '03-CZ-13-MDX-1', dataList: [], class: 'item rowThree', style: { width: '365px', left: '10px' } },
          { index: 9, name: '03-CZ-13-MDX-2', desc: '03-CZ-13-MDX-2', dataList: [], class: 'item rowThree', style: { width: '365px', left: '385px' } },
          { index: 10, name: '03-CZ-13-MDX-3', desc: '03-CZ-13-MDX-3', dataList: [], class: 'item rowThree', style: { width: '365px', left: '760px' } },
          { index: 11, name: '03-ZZ-13-MDX-1', desc: '03-ZZ-13-MDX-1', dataList: [], class: 'item rowThree', style: { width: '365px', left: '1510px' } },
          { index: 12, name: '03-ZZ-13-MDX-2', desc: '03-ZZ-13-MDX-2', dataList: [], class: 'item rowThree', style: { width: '365px', left: '1885px' } },
          { index: 13, name: '03-ZZ-13-MDX-3', desc: '03-ZZ-13-MDX-3', dataList: [], class: 'item rowThree', style: { width: '365px', left: '2260px' } },
          { index: 14, name: '03-CZ-19-1', desc: '03-CZ-19-1', dataList: [], class: 'item rowFour', style: { left: '10px' } },
          { index: 15, name: '03-ZZ-19-1', desc: '03-ZZ-19-1', dataList: [], class: 'item rowFour', style: { left: '260px' } },
          { index: 16, name: '03-CZ-19-2', desc: '03-CZ-19-2', dataList: [], class: 'item rowFour', style: { left: '510px' } },
          { index: 17, name: '03-CZ-12/21-1', desc: '03-CZ-12/21-1', dataList: [], class: 'item rowFour', style: { left: '760px' } },
          { index: 18, name: '03-CZ-12/21-2', desc: '03-CZ-12/21-2', dataList: [], class: 'item rowFour', style: { left: '1010px' } },
          { index: 19, name: '03-CZ-12/21-3', desc: '03-CZ-12/21-3', dataList: [], class: 'item rowFour', style: { left: '1260px' } },
          { index: 20, name: '03-ZZ-12-1', desc: '03-ZZ-12-1', dataList: [], class: 'item rowFour', style: { left: '1510px' } },
          { index: 21, name: '03-ZZ-12-2', desc: '03-ZZ-12-2', dataList: [], class: 'item rowFour', style: { left: '1760px' } },
          { index: 22, name: '03-ZZ-12-3', desc: '03-ZZ-12-3', dataList: [], class: 'item rowFour', style: { left: '2010px' } },
          { index: 23, name: '03-ZZ-CWK', desc: '03-ZZ-CWK', dataList: [], class: 'item rowFour', style: { left: '2260px' } },
          { index: 24, name: '03-ZZ-13-1', desc: '03-ZZ-13-1', dataList: [], class: 'item rowFour', style: { left: '2510px' } },
          { index: 25, name: '03-ZZ-CZX', desc: '03-ZZ-CZX', dataList: [], class: 'item rowFour', style: { left: '2760px' } },
          { index: 26, name: '03-CZ-12/21-4', desc: '03-CZ-12/21-4', dataList: [], class: 'item rowFive', style: { left: '760px' } },
          { index: 27, name: '03-CZ-12/21-5', desc: '03-CZ-12/21-5', dataList: [], class: 'item rowFive', style: { left: '1010px' } },
          { index: 28, name: '03-CZ-12/21-6', desc: '03-CZ-12/21-6', dataList: [], class: 'item rowFive', style: { left: '1260px' } },
          { index: 29, name: '03-ZZ-21-1', desc: '03-ZZ-21-1', dataList: [], class: 'item rowFive', style: { left: '1510px' } },
          { index: 30, name: '03-ZZ-21-2', desc: '03-ZZ-21-2', dataList: [], class: 'item rowFive', style: { left: '1760px' } },
          { index: 31, name: '03-ZZ-21-3', desc: '03-ZZ-21-3', dataList: [], class: 'item rowFive', style: { left: '2010px' } },
          { index: 32, name: '03-CZZ-TY-1', desc: '03-CZZ-TY-1', dataList: [], class: 'item rowFive', style: { left: '2260px' } },
          { index: 33, name: '03-CZZ-TY-2', desc: '03-CZZ-TY-2', dataList: [], class: 'item rowFive', style: { left: '2510px' } }
        ],
        detail: {
          dialogVisiable: false, title: '',
          queryInfo: { containerno: '', workstationname: '' },
          data: {}
        }
      },
      methods: {
        async getData() {
          const loading = this.$loading({ lock: true, text: '数据加载中', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
          const { data: { data, meta, total } } = await axios({
            method: "POST",
            url: "../handler/board/ZSWorkZoneLayoutDashBoard.ashx?action=getData",
            data: { type: 'getData', ...this.queryInfo }
          });
          loading.close();
          if (meta.status === 500) {
            return this.$message.error(meta.msg);
          }

          for (let i of this.workstationMapping) {
            for (const d of data) {
              let { machineno, description, containerno } = d;
              if (d.workstationname === i.name) {
                i.dataList.push({ machineno, description, containerno, workstationname: i.name, detail: { ...this.detail } });
              }
            }
          }
        },
        async showDetail(row, x, y) {
          const { machineno, description, workstationname, containerno } = row;
          this.workstationMapping[x].dataList[y].detail.title = `工位:【${workstationname}】任务:【${description}】详细信息`;
          const loading = this.$loading({ lock: true, text: '数据加载中', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
          const { data: { data, meta, total } } = await axios({
            method: "POST",
            url: "../handler/board/ZSWorkZoneLayoutDashBoard.ashx?action=getDetail",
            data: { type: 'getDetail', workstationname, containerno }
          });
          loading.close();
          this.workstationMapping[x].dataList[y].detail.dialogVisiable = true;
          this.workstationMapping[x].dataList[y].detail.data = { ...data[0] };
          this.$nextTick(() => {
            const popperRef = 'popper' + x + '-' + y
            this.$refs[popperRef][0].updatePopper()
          })
        }
      },
      async mounted() {
        const factoryInfo = await getFactoryInfo({ factoryid: Decrypt(getParams('factoryid')), isMapping: '是' });
        const { factoryid, factoryname } = factoryInfo[0];
        this.queryInfo.factoryname = factoryname;
        this.getData();
      }
    });
  </script>
</body>

</html>